<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Three levels of linkage in the world</title>
    <link href="resource/chosen.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="resource/chosen.jquery.min.js"></script>
    <style type="text/css">
        .dept_select {
            min-width: 200px;
        }
    </style>

</head>
<body>
<select id="country" class="dept_select" >
</select>
<select id="province" class="dept_select" >
</select>
<select id="city" class="dept_select">
</select>
<button>submit</button>
<script type="text/javascript">
	var areaObj = [];

    function initLocation(e) {
        var a = 0;
        for (var m in e) {
            areaObj[a] = e[m];
            a++;
        }
    }
	
</script>
<script src="resource/area_chs.js"></script>
<script src="resource/location_chs.js"></script>
<script type="text/javascript">	
    var country = '';
    for (var a = 0; a <= _areaList.length - 1; a++) {
        var objContry = _areaList[a];
        country += '<option value="' + objContry + '" a="' + (a + 1) + '">' + objContry + '</option>';
    }
    $("#country").html(country).chosen({search_contains: true}).change(function () {
        var a = $("#country").find("option[value='" + $("#country").val() + "']").attr("a");
        var _province = areaObj[a];
        var province = '';
        for (var b in _province) {
            var objProvince = _province[b];
            if (objProvince.n) {
                province += '<option value="' + objProvince.n + '" b="' + b + '">' + objProvince.n + '</option>';
            }
        }
        if (!province) {
            province = '<option value="" b="0">--</option>';
        }
        $("#province").html(province).chosen({search_contains: true}).change(function () {
            var b = $("#province").find("option[value='" + $("#province").val() + "']").attr("b");
            var _city = areaObj[a][b];
            var city = '';
            for (var c in _city) {
                var objCity = _city[c];
                if (objCity.n) {
                    city += '<option value="' + objCity.n + '">' + objCity.n + '</option>';
                }
            }
            if (!city) {
                var city = '<option value="">--</option>';
            }
            $("#city").html(city).chosen({search_contains: true}).change();
            $(".dept_select").trigger("chosen:updated");
        });
        $("#province").change();
        $(".dept_select").trigger("chosen:updated");
    });
    $("#country").change();
    $("button").click(function () {
        alert($("#country").val() + '-' + $("#province").val() + '-' + $("#city").val());
    });
</script>
</body>
</html>